<template>
    <Form ref="userForm" :model="fields" :rules="rules">
        <Row :gutter="16">
            <Col span="8">
                <FormItem label="账号" prop="name">
                    <Input v-model="fields.name" placeholder="请输入账号"></Input>
                </FormItem>
            </Col>
            <Col span="8">
                <FormItem label="邮箱账号" prop="email">
                    <Input v-model="fields.email" placeholder="请输入电子邮箱"></Input>
                </FormItem>
            </Col>
            <Col span="8">
                <FormItem label="手机号码" prop="mobile">
                    <Input v-model="fields.mobile" placeholder="请输入手机号码"></Input>
                </FormItem>
            </Col>
        </Row>
        <Row :gutter="16">
            <Col span="8">
                <FormItem label="真实姓名" prop="realname">
                    <Input v-model="fields.realname" placeholder="请输入真实姓名"></Input>
                </FormItem>
            </Col>
            <Col span="8">
                <FormItem label="性别" prop="sex">
                    <Select v-model="fields.sex">
                        <Option value="0">保密</Option>
                        <Option value="1">男</Option>
                        <Option value="2">女</Option>
                    </Select>
                </FormItem>
            </Col>
        </Row>
        <Row :gutter="16">
            <Col span="12">
                <FormItem label="密码" prop="password">
                    <Input type="password" v-model="fields.password" placeholder="请输入密码"></Input>
                </FormItem>
            </Col>
            <Col span="12">
                <FormItem label="确认密码" prop="re_password">
                    <Input type="password" v-model="fields.re_password" placeholder="请再次输入密码"></Input>
                </FormItem>
            </Col>
        </Row>
        <Row>
            <Col>
                <FormItem>
                    <Button type="primary" @click="handleSubmit">提交</Button>
                    <Button type="ghost" style="margin-left: 10px" @click="handleCancel">取消</Button>
                </FormItem>
            </Col>
        </Row>
    </Form>
</template>

<script>
    import util from '@/libs/util';
    export default {
        data () {
            const validePhone = (rule, value, callback) => {
                var re = /^1[0-9]{10}$/;
                if (!re.test(value)) {
                    callback(new Error('请输入正确格式的手机号'));
                } else {
                    callback();
                }
            };
            const valideRePassword = (rule, value, callback) => {
                if (value !== this.fields.password) {
                    callback(new Error('两次输入密码不一致'));
                } else {
                    callback();
                }
            };

            return {
                fields: {
                    name: '',
                    email: '',
                    realname: '',
                    mobile: '',
                    sex: '0',
                    is_effect: true,
                    password: '',
                    re_password: '',
                    source: 'backend'
                },

                rules: {
                    name: [
                        { required: true, message: '请输入用户账号', trigger: 'blur'},
                        { type: 'string', min: 2, max: 16, message: '账号格式必须是英文字母、下划线或数字，2~16个字符' }
                    ],
                    email: [
                        { required: true, message: '请输入电子邮箱', trigger: 'blur' },
                        { type: 'email', message: '电子邮箱格式错误', trigger: 'blur' }
                    ],
                    realname: [
                        { required: true, message: '请输入真实姓名, 2~8个字之间', trigger: 'blur', min: 2, max: 8 }
                    ],
                    mobile: [
                        { required: true, message: '请填写手机号码', trigger: 'blur' },
                        { validator: validePhone }
                    ],
                    sex: [
                        { required: true, message: '请选择性别', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { type: 'string', min: 6, max: 18, massage: '密码必须6~18个字符', trigger: 'blur' }
                    ],
                    re_password: [
                        { required: true, message: '请再次输入密码', trigger: 'blur' },
                        { validator: valideRePassword, trigger: 'blur' }
                    ]
                }
            }
        },

        props: {
            rootNode: Object
        },

        methods: {
            handleSubmit () {
                this.$refs.userForm.validate((valid) => {
                    if (valid) {
                        this.addUser(this.fields);
                    } else {
                        this.$Message.error('验证失败');
                    }
                });
            },

            handleCancel () {
                this.rootNode.addModel = false;
            },

            addUser (data) {
                util.api().post(`/admin/api/admins`, data).then((resp) => {
                    if (resp.data.status == true) {
                        this.$Message.success(resp.data.message);
                        this.rootNode.addModel = false;
                        this.$emit('on-change', resp.data.data);
                    } else {
                        this.$Message.error(resp.data.message);
                    }
                }).catch((e) => {
                    if (e.response) {
                        if (e.response.status == 422) {
                            if (e.response.data.hasOwnProperty('errors')) {
                                for (let i in e.response.data.errors) {
                                    this.$Notice.error({ title: '表单数据验证失败', desc: e.response.data.errors[i][0] });
                                }
                            }
                        } else {
                            this.$Message.error(e.response.data.message);
                        }
                    }  else {
                        this.$Message.error('网络请求异常');
                    }
                })
            }
        }
    }
</script>